<!--
 * @Author: 秦福凯
 * @Date: 2024-07-23 18:39:46
 * @Description: 公共弹窗
 * @FilePath: \sx-school-oa\src\components\common\dialog\dialog.vue
-->
<template>
  <el-dialog
   class="u-common-dialog"
   v-bind="$attrs"
   v-model="$attrs.show"
   :title="$attrs.title || '弹窗标题'"
   :top="$attrs.top || '2vh'"
   :close-on-click-modal="false"
   :close-on-press-escape="false"
   :append-to-body="true"
    draggable
    @close="emits('close')" 
  >
   <slot>
     <!-- 自定义body内容 -->
   </slot>
  <template #footer>
   <div class="dialog-footer">
     <slot name="footer"></slot>
     <el-button v-if="!hideBtns.includes('confirm')" type="primary" @click="$emit('submit')">{{confirmBtn}}</el-button>
     <el-button v-if="!hideBtns.includes('close')" @click="$emit('close')" >关闭</el-button>
   </div>
   </template>
  </el-dialog>
 
 </template>
 
 <script setup>

  const emits = defineEmits(['close',])
  let props = defineProps({
    hideBtns:{
      type:Array,
      default:[]
    },
    confirmBtn:{
      type:String,
      default:'保存'
    }
  })
 
 </script>
 
 <style lang='scss'>
  .u-common-dialog{
    margin-bottom: 0 !important;
    padding: 0;
    .el-dialog__body{
      max-height: 78vh;
      padding:24px;
      overflow: scroll;
      overflow-x: hidden;
      .el-date-editor{
        width: 100%;
      }
    }
    .el-dialog__header{
      padding: 8px;
      /* border-bottom: 1px solid ; */
      box-shadow: 0px 0px 10px 2px #999  !important;
    }
    .el-dialog__footer{
      padding: 8px;
      box-shadow: 0px 0px 10px 2px #999  !important;

    }
  }
 </style>